<template>
  <div class="list-city" ref="wrapper">
    <div>
        <div class="title">您的位置</div>
        <div class="location">
            <div class="item">{{this.$store.state.city}}</div>
        </div>
        <div class="title">热门城市</div>
        <div class="location" >
            <div class="item"
            v-for="item in hotCity"
            :key="item.id"
            @click="handleClickCity(item.name)"
          >
            {{item.name}}
        </div>
        </div>
        <div v-for="(item, key) in city" :key="item.id">
            <div class="title" :ref="key">{{key}}</div>
            <div class="letter" v-for="items in item" :key="items.id">
                <div class="letter-item border-topbottom" @click="handleClickCity(items.name)">{{items.name}}</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    hotCity: {
      typeof: Array
    },
    city: {
      typeof: Object
    },
    getLetter: {
      typeof: String
    }
  },
  methods: {
    handleClickCity (value) {
      this.$store.dispatch('changeCity', value)
      this.$router.push({path: '/'})
    }
  },
  watch: {
    getLetter () {
      const element = this.$refs[this.getLetter][0]
      this.scroll.scrollToElement(element)
    }
  },
  mounted () {
    this.scroll = new BetterScroll(this.$refs.wrapper, {})
  }
}
</script>

<style lang="stylus" scope>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.list-city
 overflow: hidden
 position: absolute
 left: 0
 right: 0
 bottom: 0
 top: 1.7rem
 .title
  background: #EDEDED
  height: .7rem
  line-height: .7rem
  text-indent: .2rem
 .location
  padding-right: .4rem
  color: $bgColor
  border: .01rem solid #ccc
  flex-row()
  flex-wrap: wrap
  align-items: center
  justify-content: space-around
  .item
   margin-top: .1rem
   margin-bottom: .1rem
   height: .6rem
   width: 1.88rem
   text-align: center
   line-height: .6rem
   border: .01rem solid $bgColor
 .letter
  .letter-item
   height: .6rem
   text-indent: .2rem
   line-height: .6rem
</style>
